Voice control switch
August 13, 2022

Voice control switch

Click Here to View Step by Step

Voice Control Switch used  :

  • NodeMCU ESP8266 
  • Relay 
  • any device on your network (Smartphone - PC) 

 

HTML Code

Page 1 Voice recognize:

<!doctype html>
    <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
html {
width:100%;
}
body {
background-color:#f2f2f2;
margin:0;
padding:0;
}
footer {

   position: fixed;
   left: 0;
   bottom: 0px;
   width: 100%;
   text-align: left;
}
.footer-dark {
 text-align:left;
  padding:50px 0;
  button:0px;
}
.footer-dark h3 {
 text-align:left;
  margin-top:0;
  margin-bottom:12px;
  font-weight:bold;
  font-size:16px;
}
.footer-dark ul {
 text-align:center;
  padding:0;
  list-style:none;
  line-height:1.6;
  font-size:14px;
  margin-bottom:0;
}
.footer-dark {
 text-align:left;
  color:inherit;
  text-decoration:none;
  opacity:0.6;
}
.footer-dark a:hover {
 text-align:center;
  opacity:0.8;
}
@media (max-width:767px) {
  .footer-dark .item:not(.social) {
    text-align:center;
    padding-bottom:20px;
  }
}
.footer-dark .item.text {
 text-align:center;
  margin-bottom:36px;
}
@media (max-width:767px) {
  .footer-dark .item.text {
    margin-bottom:0;
  }
}
.footer-dark .item.text p {
 text-align:center;
  opacity:0.6;
  margin-bottom:0;
}
.footer-dark .item.social {
  text-align:center;
}
@media (max-width:991px) {
  .footer-dark .item.social {
    text-align:center;
    margin-top:20px;
  }
}
.footer-dark .item.social > a {
  font-size:20px;
  width:36px;
  height:36px;
  line-height:36px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,0.4);
  margin:0 8px;
  color:#fff;
  opacity:0.75;
}

.footer-dark .item.social > a:hover {
 text-align:center;
  opacity:0.9;
}
.footer-dark .copyright {
  text-align:center;
  padding-top:24px;
  opacity:0.3;
  font-size:13px;
  margin-bottom:0;
}
        </style>

        <title>JavaScript Speech to Text</title>
    </head>
<body class="d-flex flex-column">
<div style="padding:40px">
        <h2>JavaScript Speech to Text</h2>
        <p>Click on the below button and speak something...</p>
        <p><button type="button" onclick="runSpeechRecognition()">Speech to Text</button> &nbsp; <span id="action"></span></p>
        <div id="output" class="hide"></div>
</div>
        <script>

            /* JS comes here */
            function runSpeechRecognition() {
                // get output div reference
                var output = document.getElementById("output");
                // get action element reference
                var action = document.getElementById("action");
                // new speech recognition object
                var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
                var recognition = new SpeechRecognition();
            
                // This runs when the speech recognition service starts
                recognition.onstart = function() {
                    action.innerHTML = "<small>listening, please speak...</small>";
                };
                
                recognition.onspeechend = function() {
                    action.innerHTML = "<small>stopped listening, hope you are done...</small>";
                    recognition.stop();
                }
              
                // This runs when the speech recognition service returns result
                recognition.onresult = function(event) {
                var transcript = event.results[0][0].transcript;
//var transcript ="open one";
                    var confidence = event.results[0][0].confidence;
                    output.innerHTML = "<b>Text:</b> " + transcript + "<br/> <b>Confidence:</b> " + confidence*100+"%";
                    output.classList.remove("hide");
if (transcript =="open number one" || transcript =="on number one")
{
var i = document.createElement("img");
i.src = "http://192.168.1.7/?State=o_on";
}
if (transcript =="off number one"||transcript =="number one")
{
var i = document.createElement("img");
i.src = "http://192.168.1.7/?State=o_off";
}
if (transcript =="open one" ||transcript =="on number two"||transcript =="open number two")
{
var i = document.createElement("img");
i.src = "http://192.168.1.7/?State=t_on";
}
if (transcript =="off number 2" ||transcript =="off number two" ||transcript =="number two" )
{
var i = document.createElement("img");
i.src = "http://192.168.1.7/?State=t_off";
}
                };
              
                 // start recognition
                 recognition.start();
            }
        </script>
 <!-- Footer -->
    <div class="footer">
        <footer>
            <div class="container">
                <div class="row">
                   <div class="footer-dark"><a href="index.html"><img width="60" src="img/voice.png"></a>&nbsp;&nbsp;<a href="button.html"><img  width="60" src="img/home.png"></a></div>
                </div>
           
            </div>
        </footer>
    </div>
   
    </body>
</html>

Page 2 button switch :

<!doctype html>
    <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

html {
width:100%;
}
body {
background-color:#f2f2f2;
margin:0;
padding:0;
}
footer {

   position: fixed;
   left: 0;
   bottom: 0px;
   width: 100%;
   text-align: center;
}
#app-cover {
  display: table;
  width: 100%;
  margin: 80px auto;
  counter-reset: button-counter;
}
.row {
  display: table-row;
 
}
.title
{
 margin-left: 25px;}
.rowspace
{
height:100px;
}
.toggle-button-cover {
  display: table-cell;
  position: relative;
  width: 200px;
  height: 140px;
  box-sizing: border-box;
}
.button-cover {
  height: 100px;
  margin: 20px;
  background-color: #fff;
  box-shadow: 0 10px 20px -8px #c5d6d6;
  border-radius: 4px;
}
.button-cover:before {
  counter-increment: button-counter;
  content: counter(button-counter);
  position: absolute;
  right: 0;
  bottom: 0;
  color: #d7e3e3;
  font-size: 12px;
  line-height: 1;
  padding: 5px;
}
.button-cover,
.knobs,
.layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.button {
  position: relative;
  top: 50%;
  width: 74px;
  height: 36px;
  margin: -20px auto 0 auto;
  overflow: hidden;
}
.button.r,
.button.r .layer {
  border-radius: 100px;
}
.button.b2 {
  border-radius: 2px;
}
.checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}
.knobs {
  z-index: 2;
}
.layer {
  width: 100%;
  background-color: #ebf7fc;
  transition: 0.3s ease all;
  z-index: 1;
}
/* Button 1 */
#button-1 .knobs:before {
  content: "YES";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 10px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  background-color: #03a9f4;
  border-radius: 50%;
  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}
#button-1 .checkbox:checked + .knobs:before {
  content: "NO";
  left: 42px;
  background-color: #f44336;
}
#button-1 .checkbox:checked ~ .layer {
  background-color: #fcebeb;
}
#button-1 .knobs,
#button-1 .knobs:before,
#button-1 .layer {
  transition: 0.3s ease all;
}
/* Button 2 */
#button-2 .knobs:before,
#button-2 .knobs:after {
  content: "YES";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 10px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  background-color: #03a9f4;
  border-radius: 50%;
  transition: 0.3s ease all;
}
#button-2 .knobs:before {
  content: "YES";
}
#button-2 .knobs:after {
  content: "NO";
}
#button-2 .knobs:after {
  right: -28px;
  left: auto;
  background-color: #f44336;
}
#button-2 .checkbox:checked + .knobs:before {
  left: -28px;
}
#button-2 .checkbox:checked + .knobs:after {
  right: 4px;
}
#button-2 .checkbox:checked ~ .layer {
  background-color: #fcebeb;
}
/* Button 3 */
#button-3 .knobs:before {
  content: "On";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 10px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  background-color: #03a9f4;
  border-radius: 50%;
  transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
}
#button-3 .checkbox:active + .knobs:before {
  width: 46px;
  border-radius: 100px;
}
#button-3 .checkbox:checked:active + .knobs:before {
  margin-left: -26px;
}
#button-3 .checkbox:checked + .knobs:before {
  content: "Off";
  left: 42px;
  background-color: #f44336;
}
#button-3 .checkbox:checked ~ .layer {
  background-color: #fcebeb;
}
/* Button 4 */
#button-4 .knobs:before,
#button-4 .knobs:after {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 10px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  background-color: #03a9f4;
  border-radius: 50%;
  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}
#button-4 .knobs:before {
  content: "ON";
}
#button-4 .knobs:after {
  content: "Off";
}
#button-4 .knobs:after {
  top: -28px;
  right: 4px;
  left: auto;
  background-color: #f44336;
}
#button-4 .checkbox:checked + .knobs:before {
  top: -28px;
}
#button-4 .checkbox:checked + .knobs:after {
  top: 4px;
}
#button-4 .checkbox:checked ~ .layer {
  background-color: #fcebeb;
}
/* Button 5 */
#button-5 {
  perspective: 60px;
  overflow: visible;
}
#button-5 .knobs:before,
#button-5 .knobs span {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 10px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  border-radius: 50%;
  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}
#button-5 .knobs:before {
  background-color: #03a9f4;
}
#button-5 .knobs span:before {
  content: "On";
}
#button-5 .knobs:before,
#button-5 .layer {
  transform: rotateY(0);
  transform-origin: center;
}
#button-5 .checkbox:checked + .knobs:before,
#button-5 .checkbox:checked + .knobs span {
  left: 42px;
}
#button-5 .checkbox:checked + .knobs:before {
  transform: rotateY(180deg);
  background-color: #f44336;
}
#button-5 .checkbox:checked + .knobs span:before {
  content: "Off";
  left: 42px;
}
#button-5 .checkbox:checked ~ .layer {
  background-color: #fcebeb;
  transform: rotateY(-180deg);
}
#button-5 .knobs,
#button-5 .knobs:before,
#button-5 .layer {
  transition: 0.3s ease all;
}
/* Button 6 */
#button-6 {
  overflow: visible;
}
#button-6 .knobs:before {
  content: "On";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 10px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  background-color: #03a9f4;
  border-radius: 50%;
}
#button-6 .layer,
#button-6 .knobs,
#button-6 .knobs:before {
  transform: rotateZ(0);
  transition: 0.4s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}
#button-6 .checkbox:checked + .knobs {
  transform: rotateZ(-180deg);
}
#button-6 .checkbox:checked + .knobs:before {
  content: "NO";
  background-color: #f44336;
  transform: rotateZ(180deg);
}
#button-6 .checkbox:checked ~ .layer {
  background-color: #fcebeb;
  transform: rotateZ(180deg);
}
/* Button 7 */
#button-7 .knobs:before,
#button-7 .knobs:after,
#button-7 .knobs span {
  position: absolute;
  top: 4px;
  width: 20px;
  height: 10px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  border-radius: 50%;
}
#button-7 .knobs:before {
  content: "On";
  left: 4px;
  color: #fff;
  opacity: 1;
}
#button-7 .knobs:after {
  content: "Off";
  left: 42px;
  color: #fff;
  width: 14px;
  text-align: left;
  padding: 9px 7px;
  background-color: #f44336;
  opacity: 0;
}
#button-7 .knobs:before,
#button-7 .knobs:after {
  transition: 0.3s ease all;
  z-index: 2;
}
#button-7 .knobs span {
  left: 4px;
  background-color: #03a9f4;
  transition: 0.2s ease all;
  z-index: 1;
}
#button-7 .checkbox:checked + .knobs:before {
  opacity: 0;
}
#button-7 .checkbox:checked + .knobs:after {
  opacity: 1;
}
#button-7 .checkbox:checked + .knobs span {
  top: 14px;
  left: 56px;
  width: 2px;
  height: 2px;
  padding: 3px;
  background-color: #fff;
  z-index: 3;
}
#button-7 .checkbox:checked ~ .layer {
  background-color: #fcebeb;
}
/* Button 8 */
#button-8 .knobs:before,
#button-8 .knobs:after,
#button-8 .knobs span {
  position: absolute;
  top: 4px;
  width: 20px;
  height: 10px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  border-radius: 50%;
  transition: 0.3s ease all;
}
#button-8 .knobs:before {
  content: "YES";
  color: #fff;
  left: 4px;
}
#button-8 .knobs:after {
  content: "NO";
  left: 42px;
  color: #fff;
  background-color: #f44336;
  opacity: 0;
}
#button-8 .knobs:before,
#button-8 .knobs:after {
  z-index: 2;
}
#button-8 .knobs span {
  left: 4px;
  background-color: #03a9f4;
  z-index: 1;
}
#button-8 .checkbox:checked + .knobs:before {
  opacity: 0;
}
#button-8 .checkbox:checked + .knobs:after {
  opacity: 1;
}
#button-8 .checkbox:checked + .knobs span {
  background-color: #fcebeb;
  transform: scale(4);
}
/* Button 9 */
#button-9 .knobs:before,
#button-9 .knobs:after,
#button-9 .knobs span {
  position: absolute;
  top: 4px;
  width: 20px;
  height: 10px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  border-radius: 50%;
  transition: 0.4s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}
#button-9 .knobs:before {
  content: "YES";
  left: 4px;
}
#button-9 .knobs:after {
  content: "NO";
  right: -24px;
}
#button-9 .knobs:before,
#button-9 .knobs:after {
  color: #fff;
  z-index: 2;
}
#button-9 .knobs span {
  left: 4px;
  background-color: #03a9f4;
  z-index: 1;
}
#button-9 .checkbox:checked + .knobs:before {
  left: -24px;
}
#button-9 .checkbox:checked + .knobs:after {
  right: 4px;
}
#button-9 .checkbox:checked + .knobs span {
  left: 42px;
  background-color: #f44336;
}
#button-9 .checkbox:checked ~ .layer {
  background-color: #fcebeb;
}
/* Button 10 */
#button-10 .knobs:before,
#button-10 .knobs:after,
#button-10 .knobs span {
  position: absolute;
  top: 4px;
  width: 20px;
  height: 10px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  border-radius: 2px;
  transition: 0.3s ease all;
}
#button-10 .knobs:before {
  content: "";
  left: 4px;
  background-color: #03a9f4;
}
#button-10 .knobs:after {
  content: "NO";
  right: 4px;
  color: #4e4e4e;
}
#button-10 .knobs span {
  display: inline-block;
  left: 4px;
  color: #fff;
  z-index: 1;
}
#button-10 .checkbox:checked + .knobs span {
  color: #4e4e4e;
}
#button-10 .checkbox:checked + .knobs:before {
  left: 42px;
  background-color: #f44336;
}
#button-10 .checkbox:checked + .knobs:after {
  color: #fff;
}
#button-10 .checkbox:checked ~ .layer {
  background-color: #fcebeb;
}
/* Button 11 */
#button-11 {
  overflow: visible;
}
#button-11 .knobs {
  perspective: 70px;
}
#button-11 .knobs:before,
#button-11 .knobs:after,
#button-11 .knobs span {
  position: absolute;
  top: 4px;
  border-radius: 2px;
}
#button-11 .knobs:before,
#button-11 .knobs:after {
  width: 20px;
  height: 10px;
  color: #4e4e4e;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
}
#button-11 .knobs:before {
  content: "YES";
  left: 4px;
}
#button-11 .knobs:after {
  content: "NO";
  right: 4px;
}
#button-11 .knobs span {
  right: 4px;
  width: 33px;
  height: 28px;
  background-color: #03a9f4;
  transform: rotateY(0);
  transform-origin: 0% 50%;
  transition: 0.6s ease all;
  z-index: 1;
}
#button-11 .checkbox:checked + .knobs span {
  transform: rotateY(-180deg);
  background-color: #f44336;
}
#button-11 .checkbox:checked ~ .layer {
  background-color: #fcebeb;
}
/* Button 12 */
#button-12 .knobs:before,
#button-12 .knobs:after,
#button-12 .knobs span,
#button-12 .knobs span:before,
#button-12 .knobs span:after {
  position: absolute;
  top: 4px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  border-radius: 2px;
  transition: 0.3s ease all;
}
#button-12 .knobs:before {
  content: "YES";
  left: 4px;
}
#button-12 .knobs:after {
  content: "NO";
  right: 4px;
}
#button-12 .knobs:before,
#button-12 .knobs:after {
  width: 27px;
  height: 10px;
  color: #4e4e4e;
  padding: 9px 3px;
  z-index: 1;
}
#button-12 .knobs span {
  display: inline-block;
  z-index: 2;
}
#button-12 .knobs span,
#button-12 .knobs span:before,
#button-12 .knobs span:after {
  width: 20px;
  height: 10px;
  padding: 9px 4px;
}
#button-12 .knobs span:before,
#button-12 .knobs span:after {
  content: "";
  top: 0;
}
#button-12 .knobs span:before {
  left: -28px;
  background-color: #f44336;
}
#button-12 .knobs span:after {
  right: -42px;
  background-color: #03a9f4;
}
#button-12 .checkbox:checked + .knobs span:before {
  left: 4px;
}
#button-12 .checkbox:checked + .knobs span:after {
  right: -74px;
}
#button-12 .checkbox:checked ~ .layer {
  background-color: #fcebeb;
}
/* Button 13 */
#button-13 .knobs:before,
#button-13 .knobs:after,
#button-13 .knobs span {
  position: absolute;
  top: 4px;
  width: 20px;
  height: 10px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  border-radius: 2px;
  transition: 0.3s ease all;
}
#button-13 .knobs:before,
#button-13 .knobs:after {
  color: #4e4e4e;
  z-index: 1;
}
#button-13 .knobs:before {
  content: "YES";
  left: 4px;
}
#button-13 .knobs:after {
  content: "NO";
  right: 4px;
}
#button-13 .knobs span {
  width: 25px;
  left: 37px;
  background-color: #03a9f4;
  z-index: 2;
}
#button-13 .checkbox:checked + .knobs span {
  left: 4px;
  background-color: #f44336;
}
#button-13 .checkbox:checked ~ .layer {
  background-color: #fcebeb;
}
/* Button 14 */
#button-14 .knobs:before,
#button-14 .knobs:after,
#button-14 .knobs span:before,
#button-14 .knobs span:after {
  position: absolute;
  top: 4px;
  width: 20px;
  height: 10px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  border-radius: 2px;
  transition: 0.3s ease all;
}
#button-14 .knobs:before,
#button-14 .knobs:after {
  color: #4e4e4e;
  z-index: 1;
}
#button-14 .knobs:before {
  content: "YES";
  left: 4px;
}
#button-14 .knobs:after {
  content: "NO";
  right: 4px;
}
#button-14 .knobs span {
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
#button-14 .knobs span:before {
  left: 4px;
  top: -28px;
  background-color: #f44336;
}
#button-14 .knobs span:after {
  top: 4px;
  left: 39px;
  background-color: #03a9f4;
}
#button-14 .knobs span:before,
#button-14 .knobs span:after {
  content: "";
  width: 23px;
  z-index: 2;
}
#button-14 .checkbox:checked + .knobs span:before {
  top: 4px;
}
#button-14 .checkbox:checked + .knobs span:after {
  top: -28px;
}
#button-14 .checkbox:checked ~ .layer {
  background-color: #fcebeb;
}
/* Button 15 */
#button-15 .knobs:before,
#button-15 .knobs:after {
  position: absolute;
  top: 4px;
  width: 20px;
  height: 10px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  opacity: 1;
  border-radius: 2px;
  transform: scale(1);
  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}
#button-15 .knobs:before {
  content: "YES";
  left: 4px;
  background-color: #03a9f4;
}
#button-15 .knobs:after {
  content: "NO";
  right: 4px;
  opacity: 0;
  transform: scale(4);
  background-color: #f44336;
}
#button-15 .checkbox:checked + .knobs:before {
  opacity: 0;
  transform: scale(4);
}
#button-15 .checkbox:checked + .knobs:after {
  opacity: 1;
  transform: scale(1);
}
#button-15 .checkbox:checked ~ .layer {
  background-color: #fcebeb;
}
/* Button 16 */
#button-16 .knobs:before {
  content: "YES";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 10px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  background-color: #03a9f4;
  border-radius: 2px;
  transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
}
#button-16 .checkbox:active + .knobs:before {
  width: 46px;
}
#button-16 .checkbox:checked:active + .knobs:before {
  margin-left: -26px;
}
#button-16 .checkbox:checked + .knobs:before {
  content: "NO";
  left: 42px;
  background-color: #f44336;
}
#button-16 .checkbox:checked ~ .layer {
  background-color: #fcebeb;
}
/* Button 17 */
#button-17 .knobs:before,
#button-17 .knobs span {
  content: "YES";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 10px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
}
#button-17 .knobs:before {
  transition: 0.3s ease all, left 0.5s cubic-bezier(0.18, 0.89, 0.35, 1.15);
  z-index: 2;
}
#button-17 .knobs span {
  background-color: #03a9f4;
  border-radius: 2px;
  transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
  z-index: 1;
}
#button-17 .checkbox:checked + .knobs:before {
  content: "NO";
  left: 42px;
}
#button-17 .checkbox:checked + .knobs span {
  left: 42px;
  background-color: #f44336;
}
#button-17 .checkbox:checked ~ .layer {
  background-color: #fcebeb;
}
/* Button 18 */
#button-18 .knobs:before,
#button-18 .knobs span {
  content: "YES";
  position: absolute;
  top: 4px;
  left: 4px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  background-color: #03a9f4;
  border-radius: 2px;
}
#button-18 .knobs:before {
  top: 50%;
  left: 8px;
  width: 20px;
  height: 10px;
  margin-top: -5px;
  background-color: transparent;
  z-index: 2;
}
#button-18 .knobs span {
  width: 20px;
  height: 10px;
  padding: 9px 4px;
  transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
  z-index: 1;
}
#button-18 .checkbox:active + .knobs:before {
  left: 10px;
  width: 46px;
  height: 4px;
  color: transparent;
  margin-top: -2px;
  background-color: #0095d8;
  transition: 0.3s ease all;
  overflow: hidden;
}
#button-18 .checkbox:active + .knobs span {
  width: 58px;
}
#button-18 .checkbox:checked:active + .knobs:before {
  left: auto;
  right: 10px;
  background-color: #d80000;
}
#button-18 .checkbox:checked:active + .knobs span {
  margin-left: -38px;
}
#button-18 .checkbox:checked + .knobs:before {
  content: "NO";
  left: 47px;
}
#button-18 .checkbox:checked + .knobs span {
  left: 42px;
  background-color: #f44336;
}
#button-18 .checkbox:checked ~ .layer {
  background-color: #fcebeb;
}
footer {

   position: fixed;
   left: 0;
   bottom: 0px;
   width: 100%;
   text-align: center;
}
.footer-dark {
 text-align:center;
  padding:50px 0;
  button:0px;
}
.footer-dark h3 {
 text-align:center;
  margin-top:0;
  margin-bottom:12px;
  font-weight:bold;
  font-size:16px;
}
.footer-dark ul {
 text-align:center;
  padding:0;
  list-style:none;
  line-height:1.6;
  font-size:14px;
  margin-bottom:0;
}
.footer-dark {
 text-align:center;
  color:inherit;
  text-decoration:none;
  opacity:0.6;
}
.footer-dark a:hover {
 text-align:center;
  opacity:0.8;
}
@media (max-width:767px) {
  .footer-dark .item:not(.social) {
    text-align:center;
    padding-bottom:20px;
  }
}
.footer-dark .item.text {
 text-align:center;
  margin-bottom:36px;
}
@media (max-width:767px) {
  .footer-dark .item.text {
    margin-bottom:0;
  }
}
.footer-dark .item.text p {
 text-align:center;
  opacity:0.6;
  margin-bottom:0;
}
.footer-dark .item.social {
  text-align:center;
}
@media (max-width:991px) {
  .footer-dark .item.social {
    text-align:center;
    margin-top:20px;
  }
}
.footer-dark .item.social > a {
  font-size:20px;
  width:36px;
  height:36px;
  line-height:36px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,0.4);
  margin:0 8px;
  color:#fff;
  opacity:0.75;
}

.footer-dark .item.social > a:hover {
 text-align:center;
  opacity:0.9;
}
.footer-dark .copyright {
  text-align:center;
  padding-top:24px;
  opacity:0.3;
  font-size:13px;
  margin-bottom:0;
}
</style>
</head>
    <body>
<div id="app-cover">
  <div class="row">
  
   <div class="title"> 
Relay 1</div>
        <div class="button r" id="button-3">
          <input type="checkbox"  id="myCheck" onclick="myFunction_relayone()" class="checkbox" />
          <div class="knobs"></div>
          <div class="layer"></div>
       
    </div>
  </div>
  
   
  <div class="rowspace"> </div>
  <div class="row">
  
   <div class="title"> 
Relay 2</div>
        <div class="button r" id="button-3">
          <input type="checkbox" id="myChecks" onclick="myFunction_relaytwo()" class="checkbox" />
          <div class="knobs"></div>
          <div class="layer"></div>
       
    </div>
  </div>
  
   
  </div>
</div>
<script>
function myFunction_relayone()
{
  var checkBox = document.getElementById("myCheck");
 
  if (checkBox.checked == true){
var i = document.createElement("img");
i.src = "http://192.168.1.7/?State=o_off";
  } else {
    var i = document.createElement("img");
i.src = "http://192.168.1.7/?State=o_on";
  }
}
function myFunction_relaytwo()
{
  var checkBoxv = document.getElementById("myChecks");
 
  if (checkBoxv.checked == true){
  var i = document.createElement("img");
i.src = "http://192.168.1.7/?State=t_off";
  } else {
   var i = document.createElement("img");
i.src = "http://192.168.1.7/?State=t_on";
  }
}
</script>
<!-- Footer -->
    <div class="footer">
        <footer>
            <div class="container">
                <div class="row">
                   <div class="footer-dark"><a href="index.html"><img width="60" src="img/voice.png"></a>&nbsp;&nbsp;<a href="button.html"><img  width="60" src="img/home.png"></a></div>
                </div>
           
            </div>
        </footer>
    </div>
   
</body>
</html>

Download HTML Code :

Smarthome

 

Arduino IDE Code :


#include <ESP8266WiFi.h>
#include <WiFiClient.h> 
#include <ESP8266WebServer.h>
#define relay1 D1
#define relay2 D2
String command;     
//const char* ssid = "ABbkareno Wifi";
 //  const char* password = "youtubechannel";  //Enter Password here
 const char* ssid     = "WE_B56061";         // The SSID (name) of the Wi-Fi network you want to connect to
  const char* password = "j9t07065";     // The password of the Wi-Fi network
ESP8266WebServer server(80);
 String relay1State = "off";
         String relay2State = "off";
         #define relay1 D1
         #define relay2 D2
void setup() {
 
  // Initialize the output variables as outputs
           pinMode(relay1, OUTPUT);
           pinMode(relay2, OUTPUT);
          // Set outputs to HIGH. relay active LOW
          digitalWrite(relay1, HIGH);
           digitalWrite(relay2, HIGH);
  
  Serial.begin(115200);
  
// Connecting WiFi
  WiFi.mode(WIFI_AP);
 // WiFi.softAP(ssid, password);
 WiFi.begin(ssid, password);            
  //IPAddress myIP = WiFi.softAPIP();
 // Serial.print("AP IP address: ");
 // Serial.println(myIP);
Serial.print("Connecting to ");
      Serial.print(ssid); Serial.println(" ...");
      int i = 0;
       while (WiFi.status() != WL_CONNECTED)
       { // Wait for the Wi-Fi to connect
         delay(1000);
         Serial.print(++i); Serial.print(' ');
       }
    Serial.println('\n');
    Serial.println("Connection established!");  
    Serial.print("IP address:\t");
    Serial.println(WiFi.localIP());   
 // Starting WEB-server 
     server.on ( "/", HTTP_handleRoot );
     server.onNotFound ( HTTP_handleRoot );
     server.begin();    
}
void relay_one_open(){ 
         digitalWrite(relay1, LOW);
}
void relay_two_open(){ 
      digitalWrite(relay2, LOW);
  }

void relay_one_off(){ 
         digitalWrite(relay1,HIGH );
}
void relay_two_off(){ 
      digitalWrite(relay2, HIGH);
  }
void loop() {
    server.handleClient();
    
      command = server.arg("State");
      if (command == "o_on") 
      {
          Serial.println(command);
        relay_one_open();
        }
      else if (command == "o_off") relay_one_off();
      else if (command == "t_on") relay_two_open();
      else if (command == "t_off") relay_two_off();
    
}
void HTTP_handleRoot(void) {
if( server.hasArg("State") ){
       Serial.println(server.arg("State"));
  }
  server.send ( 200, "text/html", "" );
  delay(1);
}